import { Button } from '@nutui/nutui-taro'
import { Image, Text, View } from '@tarojs/components'
import { useDidShow, useReady } from '@tarojs/taro'
import { computed, defineComponent, ref } from 'vue'

import logo from '@/static/logo-taro.png'
import { useMainStore } from '@/store'

import styles from './index.module.css'

export default defineComponent({
  name: 'IndexPage',
  onLoad(res) {
    console.log('onLoad：', res)
  },
  setup() {
    const title = ref('Hello Taro')

    const mainStore = useMainStore()

    const count = computed(() => mainStore.count)

    function handleClick() {
      mainStore.add()
    }

    useReady(() => {
      console.log('onReady')
    })

    useDidShow(() => {
      console.log('onShow')
    })

    return {
      title,
      count,
      handleClick
    }
  },
  render() {
    return (
      <View class={styles.view}>
        <Image class={styles.logo} src={logo} />
        <Text class={styles.msg}>{this.title}</Text>
        <Text>{this.count}</Text>
        <Button class={styles.btn} type="primary" onClick={this.handleClick}>
          NutUI
        </Button>
      </View>
    )
  }
})
